<template>
  <div id="app">
    <TopNav v-if="!$route.meta.hideHead"></TopNav>
    <Play :musicList="musicList" :playMusice="playMusice" @play='changeMusic'></Play>
    <router-view @play="playMusic"></router-view>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
import Play from "@/components/Play";
export default {
  data() {
    return {
      musicID: null,
      playMusice: null,
      musicList:[]
    };
  },
  components: {
    TopNav,
    Play,
  },
  methods: {
    changeMusic(e){
      this.playMusice=e;
    },
    playMusic(musice) {
      console.log('asnfwenfjsdhuvij',musice);
      // 归纳数据 ，保持数据结构一致
      if (!musice.picUrl) {
        if (musice.al && musice.al.picUrl) {
          musice.picUrl = musice.al.picUrl;
        } else {
          // 给定一个默认图片
          musice.picUrl =
            "http://p1.music.126.net/BeIc-sv62xZPpVBS4DjE-g==/109951164607988464.jpg?param=140y140";
        }
      }

      if (musice.song && musice.song.artists) {
        musice.artists = musice.song.artists;
      }
      this.playMusice = musice;
      // this.musicList.push(musice);
      // 数组函数 man filter reduce  forEach
      let exit=false;
      // 循环判断当前播放歌曲在原来播放列表是否存在
      for(let i =0;i<this.musicList.length;i++){
        if(this.musicList[i].id==musice.id){//已经存在
          exit=true;
          break;
        }
      }
      if(!exit){
        this.musicList.push(musice);
      }
    },
  },
};
</script> 


<style>
body {
  padding: 0;
  margin: 0;
}
#app {
  padding: 40px 0px;
}
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>
